隨著專案增長，為了適應各種情境下的元素樣式的變化，將可能導致 Master CSS 的類別標記的順序因為專案開發的迭代，類別標記一直新增，最終導致類別的順序也沒有規則可言，越寫越混亂。

雖然你可能是個比較有 Sense 的人，可以將類別的標記依照作用或選擇器的種類來集中管理，但難免在眾多元素與團隊成員合作開發時能保持始終如一的規則。

這時候我們就需要一些工具來輔助我們做程式碼的檢查，限制開發時的程式碼撰寫風格，Master CSS 官方也有釋出一個 ESLint 的插件，可以用於統一團隊的程式碼撰寫風格，使得類別標記時可以更有條理與一致，讓觀看類別標記時，不必再擔心是否這一串長長的類別標記後面其實出現了 hiden 類別。

安裝 Master CSS ESLint

安裝與設定的方式，與其他 ESLint Config 的安裝方式基本一致，首先需要安裝 Master CSS ESLint 的套件。

npm install @master/eslint-config-css@beta eslint

接著我們就能在 ESLint 的設定檔中（例如 .eslintrc.js 或 .eslintrc.json ），在 extends 選項添加 @master/css，來擴展 ESLint 的設定。

{
  "extends": ["@master/css"]
}

確保一致且符合邏輯的類別順序

下面這是一個沒有遵循一致性標準的類別順序，可以發現字型大小 font 類別標記，在不同的響應斷點有不同的大小，但是這些類別標記穿插在各種設定其他樣式的類別之間，導致無法第一時間就釐清這個元素所設定的類別樣式。

<div class="font:12 font:24@sm m:32 block px:16 font:32@md bg:blue:hover round mb:48">

透過 Master CSS 所制定的規則順序，可以透過 Master CSS 的 ESLint 插件來執行修正。

<div class="block round bg:blue:hover font:12 font:24@sm font:32@md m:32 mb:48 px:16">

在編輯器上使用 Master CSS ESLint 的效果看起來如下圖這樣，甚至也能設定成儲存檔案後自動做修正。

如此一來，可以確保任何元素上的類別，能夠依據預先定義好的規則來統一排列類別的順序。

未來

Master CSS ESLint 插件，想做到的不僅僅是可以確保類別標記的順序，還能透過一些檢查來執行一系列的流程，根據官方的簡介，未來 Master CSS ESLint 插件會具備以下的功能：

• 類別順序：一致性且符合邏輯的類別順序，並提供自動修正 ✅
• 衝突的類別檢查：避免重複聲明相同的 CSS 屬性 🚧
• 非法的類別檢查：一些不在預設或自訂的類別中的標記，應避免使用 🚧
• 強制使用速記簡寫：如果可能的話，將類別自動轉換為縮寫或簡寫，以減少類別標記的描述 🚧
• 不使用外部的類別：避免使用傳統 CSS 中所自訂的類別 🚧